<script lang="ts" setup>
const arr = ref([
  {
    title: '尺码',
    value: [{ item: 'l' }, { item: 'm' }, { item: 's' }],
  },
  {
    title: '款式',
    value: [{ item: '红' }, { item: '黄' }],
  },
  {
    title: '发货时间',
    value: [{ item: '48小时' }, { item: '15天' }],
  },
  {
    title: '套餐',
    value: [{ item: '默认' }, { item: '套餐一' }],
  },
])

// 拿标题循环渲染列表
const titleList = ref<any>([])
// const titleList_result = ref<any>([])
function getSku(arr: any) {
  function cartesianProduct(...arrays: any) {
    // console.log('arr', arrays);

    return arrays.reduce(
      (accumulator: any, currentValue: any) => {
        return accumulator.flatMap((x: any) =>
          currentValue.map((y: any) => x.concat(y)),
        )
      },
      [[]],
    )
  }

  // 使用辅助函数生成笛卡尔积
  const combinations = cartesianProduct(...getValueItem(arr).b)
  // console.log('combinations', combinations);

  // 将笛卡尔积转换为所需的对象数组
  const result = combinations.map((combination: any) => {
    const aa: any = {}
    for (let i = 0; i < getValueItem(arr).t.length; i++) {
      aa[getValueItem(arr).t[i]] = combination[i]
      aa.market_price = null
      aa.sale_price = null
      aa.cost = null
    }
    return aa
  })
  // console.log(result);
  return result
}

function getValueItem(arr: Array<any>) {
  const b = []
  const t = []
  for (let i = 0; i < arr.length; i++) {
    const d = arr[i].value.map((item: any) => item.item)
    b.push(d)

    t.push(arr[i].title)
  }
  titleList.value = t
  // console.log('标题', t);
  return { b, t }
}

const tableData = ref([])
function getTableData() {
  tableData.value = getSku(arr.value)
}
getTableData()
function addGuige() {
  arr.value.push({ title: '', value: [{ item: '' }] })
}
function addGuigeValue(index: number) {
  // console.log(arr.value[index])
  arr.value[index].value.push({ item: '' })
}

function delGuigeValue(index: number, iIndex: number) {
  arr.value[index].value.splice(iIndex, 1)
  getTableData()
}
function delGuige(index: number) {
  arr.value.splice(index, 1)
  getTableData()
}

const first_column_rule = ref<number[] | null>(null)
function spanMethod({ row, column, rowIndex, columnIndex }: any) {
  // console.log(column.label);

  if (columnIndex === 0) {
    const key_0 = column.label
    const first_idx = tableData.value.findIndex(x => x[key_0] === row[key_0])
    // console.log(first_idx);

    const calcSameLength = () => tableData.value.filter(x => x[key_0] === row[key_0]).length
    // console.log('长度', calcSameLength());

    first_column_rule.value = rowIndex === first_idx ? [calcSameLength(), 1] : [0, 0]
    return first_column_rule.value

    // 第二列的图片与第一列主规格使用相同合并规则 ( 恰好el-table的合并方法是横着走的 )
  }
  // else if ((columnIndex === 1)) {
  //   console.log(222);

  // }
}
</script>

<template>
  <div class="top">
    <el-button @click="addGuige">
      添加规格
    </el-button>
    <div v-for="(item, index) in arr" :key="index" class="add">
      <div style="margin-bottom: 10px;">
        规格名
        <el-input v-model="item.title" class="input" @change="getTableData">
          <template #append>
            <span @click="delGuige(index)">X</span>
          </template>
        </el-input>
      </div>
      <div>
        规格值
        <el-input v-for="(i, iIndex) in item.value" :key="iIndex" v-model="i.item" class="input" @change="getTableData">
          <template #append>
            <span @click="delGuigeValue(index, iIndex)">X</span>
          </template>
        </el-input>
        <el-button @click="addGuigeValue(index)">
          添加规格值
        </el-button>
      </div>
    </div>
  </div>

  <!--  -->

  <el-table :data="tableData" :span-method="spanMethod" border>
    <!-- <el-table-column type="index" /> -->
    <el-table-column v-for="(item, i) in titleList" :key="i" :prop="item" :label="item" />
    <el-table-column prop="market_price" label="市场价格">
      <template #default="scope">
        <div>
          <input v-model="scope.row.market_price">
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sale_price" label="销售价格">
      <template #default="scope">
        <div>
          <input v-model="scope.row.sale_price">
        </div>
      </template>
    </el-table-column><el-table-column prop="cost" label="成本">
      <template #default="scope">
        <div>
          <input v-model="scope.row.cost">
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>
.top {
  padding: 20px;
  background-color: #f7f8fa;

  .add {
    margin-top: 15px;
    border-bottom: 2px solid pink;
  }

  .input {
    width: 150px;
  }
}
</style>
